<template>
  <div>
    <el-dialog
      title="分享"
      :model-value="showDialog"
      width="540"
      @close="closeDialog"
    >
      <div class="webLinkBx">
        <el-row>
          <el-col :span="16">
            <div class="link">
              <p class="linktxt">网页端直播链接:</p>
              <p>
                <span class="linkurl">{{ detailArr.pc_link }}</span>
                <span class="code" @click="copyBtn(detailArr.pc_link)"
                  >复制</span
                >
              </p>
            </div>
            <div class="link">
              <p class="linktxt">移动端直播链接:</p>
              <p>
                <span class="linkurl">{{ detailArr.m_link }}</span>
                <span class="code" @click="copyBtn(detailArr.m_link)"
                  >复制</span
                >
              </p>
            </div>
            <el-button type="primary" @click="downloadPoster"
              >下载海报</el-button
            >
          </el-col>
          <el-col :span="8">
            <div class="rightBox">
              <div class="codeTitle">扫码分享直播间</div>
              <div class="code">
                <img
                  :src="detailArr.qrcode"
                  style="width: 94px; height: 94px"
                />
              </div>
              <div class="codeTxt" @click="download">下载</div>
            </div>
          </el-col>
        </el-row>
      </div>
    </el-dialog>
  </div>
</template>

<script setup>
import { ElMessage } from 'element-plus';

const emit = defineEmits(['update:showDialog', 'downloadPoster']);
const props = defineProps({
  showDialog: {
    type: Boolean,
    default: false,
  },
  detailArr: {
    type: [Array, Object], // 允许数组或对象类型
    default: () => [], // 默认值为一个空数组
  },
});

const copyBtn = (Url) => {
  try {
    navigator.clipboard.writeText(Url);
    ElMessage({
      message: '链接复制成功',
      type: 'success',
    });
    // this.$message.success('复制成功')
  } catch (error) {
    console.log('error:', error);
    ElMessage.error('链接复制失败');
  }
};
const download = () => {
  let eleLink = document.createElement('a');
  eleLink.download = '';
  eleLink.href = props.detailArr.qrcode;
  eleLink.click();
  eleLink.remove();
};
const downloadPoster = () => {
  emit('downloadPoster', true);
};
const closeDialog = () => {
  emit('update:showDialog', false);
};
</script>

<style scoped lang="scss">
.webLinkBx {
  height: 190px;

  .link {
    margin-bottom: 20px;

    .linktxt {
      display: inline-block;
      color: rgb(134, 144, 156);
      font-size: 14px;
      margin-bottom: 5px;
    }

    .linkurl {
      display: inline-block;
      width: 265px;
      white-space: nowrap;
      text-overflow: ellipsis;
      overflow: hidden;
      color: rgb(29, 33, 41);
    }

    .code {
      color: #165dff;
      cursor: pointer;
      font-size: 14px;
      margin-left: 10px;

      .codeImg {
        width: 94px;
        height: 94px;
      }
    }
  }

  .rightBox {
    text-align: center;
    border-left: 1px solid #e5e6eb;

    .codeTitle {
      display: flex;
      flex-direction: column;
      justify-content: center;
      color: rgb(29, 33, 41);
      font-size: 16px;
      margin-bottom: 15px;
    }

    .codeTxt {
      margin-top: 5px;
      font-family: Inter-Regular, Inter;
      font-weight: 400;
      color: #165dff;
      line-height: 20px;
      cursor: pointer;
    }
  }
}
</style>
